<template>
  <view id="person">
		<view class="nav-box">
			<view class="nav-box-text">
				<image src="@/static/img/home/person.png" class="person"></image>
				<view class="welcome">
					<view><text>姓名：{{ userInfo.nickName }}</text></view>
					<view><text>单位：{{ userInfo.dept.deptName }}</text></view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<uni-segmented-control :current="current" :values="tabs" @clickItem="setCuurent" styleType="text"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<view class="list" v-for="(item,index) in list" :key="index">
						<view class="left"><image :src="item.photo==null?'':item.photo.url" mode=""></image></view>
					     <view class="right">
					     	<view class="info">
					     		<view class="">姓名：{{item.nickName}}</view>
					     		<view class="">岗位：{{item.post}}</view>
					     		<view class="">角色：{{item.userRole==null?'':item.userRole.length>0?item.userRole[0].roleName:''}}</view>
					     	</view>
					     	<view class="check"><button type="primary" size="mini" @click="checkPerson(item)">选择</button></view>
					     </view>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="list" v-for="item in selectList" :key="item.id">
						<view class="left"><image :src="item.photo==null?'':item.photo.url" mode=""></image></view>
					     <view class="right">
					     	<view class="info">
					     		<view class="">姓名：{{item.nickName}}</view>
					     		<view class="">岗位：{{item.post}}</view>
					     		<view class="">角色：{{item.userRole==null?'':item.userRole.length>0?item.userRole[0].roleName:''}}</view>
					     	</view>
					     	<view class="options">
					     		<view class="check"><button type="primary" size="mini" @tap="openSet(item)">设置</button></view>
					     		<view class="check"><button type="warn" size="mini" @tap="remove(item)">移除</button></view>
					     	</view>
					     </view>
					</view>
				</view>
			</view>
			
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="success" title="设置" @close="$refs.popup.close()" @confirm="submitSet" :duration="2000" :before-close="true">
				<uni-forms :modelValue="formData" labelWidth="35">
				            <uni-forms-item label="岗位" name="name">
				                <uni-easyinput type="text" v-model="formData.name" placeholder="请输入岗位" />
				            </uni-forms-item>
				            <view>
				            	<uni-forms-item class="select" name="role" label="角色">
				            		<ccPicker class="item" v-model="formData.role" :range="roleList" k="roleName" v="roleSort"></ccPicker>
				            	</uni-forms-item>
				            </view>
				        </uni-forms>
			</uni-popup-dialog>
		</uni-popup>
  </view>
</template>

<script>
import {personList,checkPerson,roleList,setUserRole,removePerson} from '@/api/person/index.js'
import ccPicker from "@/components/cc-picker/cc-picker.vue"
import { decrypt } from '@/common/jsencrpty.js'

export default {
	components:{
		ccPicker
	},
  data() {
    return {
		id:'',//列表数据id
		selectList:[],//已选择
		list:[],//未选择
         userInfo: {},
		 current:0,
		 tabs:['未选择','已选择'],
		 roleList:[],//角色列表
		 formData:{
			 name:'',
			 role:''
		 }
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo');
	this.userInfo.nickName = decrypt(this.userInfo.nickName);
  },
  onReady() {
  	this.getList(0)
	this.getRole()
  },
  methods: {
	  //移除人员
	  remove(e){
		  removePerson(e.id).then(res=>{
			  if(res.code==200){
				  uni.showToast({
				  	title:'移除成功',
					icon:'success'
				  })
				  this.getList(1)
			  }else{
				  uni.showToast({
				  	title:res.msg,
					icon:'error'
				  })
			  }
		  })
	  },
	  //提交设置
	  submitSet(){
		  setUserRole(this.id,this.formData.role,this.formData.name).then(res=>{
			  if(res.code==200){
				  uni.showToast({
				  	title:'设置成功',
					icon:'success'
				  })
				  this.$refs.popup.close()
				  this.getList(1)
			  }else{
				  uni.showToast({
				  	title:res.msg,
					icon:'error'
				  })
			  }
		  })
	  },
	  //角色列表
	  getRole(){
		  let type=uni.getStorageSync('userInfo').dept.type
		  roleList(type).then(res=>{
			 if(res.code==200){
				 this.roleList=res.data
			 }
		  })
	  },
	  //打开设置弹窗
	  openSet(item){
		  this.id=''
		  this.formData.name=''
		  this.formData.role=''
		  this.id=item.id
		  this.formData.name=item.post
		  this.$forceUpdate()
		  if(item.userRole!=null &&item.userRole.length>0 ){
			  this.formData.role=item.userRole[0].roleId.toString()
		  }
		  this.$refs.popup.open('dialog')
	  },
	  setCuurent(e){
		 this.current=e.currentIndex
		 this.getList(e.currentIndex)
	  },
	  //选择人员--type:0为未选择1为已选择列表
	  checkPerson(item){
		  checkPerson(item.personId).then(res=>{
			  if(res.code==200){
				 uni.showToast({
				 	title:"添加成功",
					icon:'success'
				 })
				 this.getList((0))
			  }else{
				  uni.showToast({
				  	title:res.msg,
					icon:'error'
				  })
			  }
		  				 
		  })
	  },
	  //列表查询
   async getList(e){
	   personList(e).then(res=>{
	   		 if(res.code==200){
				 if(e==0){
					 this.list=res.data
				 }else if(e==1){
					 this.selectList=res.data
				 }
	   			 
	   		 }
	   }) 
	}
  }
}
</script>
<style lang="scss" scoped>
	.options{
		.check{
			white-space: nowrap;
		}
	}
	.ccp{
		line-height: 54.74rpx;
	}
	.select{
	   ::v-deep	.uni-forms-item__content{
		   padding-left: 9.12rpx;
			border: 1.82rpx solid #e7e7e7!important;
		}
		
	}
	#person {
		min-height: calc(100vh - 4px);
		background-color: #fafafa;
		.nav-box {
			width: 100vw;
			height: 218.97rpx;
			margin-top: -80.29rpx;
			padding: 102.18rpx 36.49rpx 102.18rpx 36.49rpx;
			background-image: url('../../static/img/home/head-bg.png');
		
			.nav-box-text {
				height: 50px;
				display: flex;
				align-items: center;
		
				.person {
					width: 48px;
					height: 48px;
				}
				.welcome {
					color: #333;
					font-size: 32rpx;
					margin-left: 40rpx;
				}
			}
		}
	    .tabs{
			padding: 0rpx 27.37rpx;
			.content{
				margin-top: 18.24rpx;
				font-size: 31.02rpx;
				.list{
					padding: 9.12rpx 0rpx;
					display: flex;
					align-items: center;
					border-bottom:1.82rpx solid #e5e5e5;
					.left{
						width: 20%;
						image{
							width: 127.73rpx;
							height: 127.73rpx;
						}
					}
					.right{
						width: 100%;
						margin-left: 27.37rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.info{
							
						}
					}
				}
			}
		}
	}
</style>
